.content{
    display: flex;
    
}
.table{
    .sbimg{
        height: .2rem;
        cursor: pointer;
    }
    .dis{
        height: .2rem;
        cursor: auto;
    }
}
.table_cont{
    width: calc(100vw - 1.3rem);
    position: relative;
    padding-left: 50px;
    float: right;
    height:calc(100vh - 1.3rem);
    background: linear-gradient(0deg, #E7E9F2 0%, #E7E9F2 100%);
    .flex{
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .crumbs{
        &>span{
            cursor: pointer;
        }
        margin-top: .18rem;
        font-size: 24px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        // text-decoration: underline;
        color: #111434;
        margin-bottom: .14rem;
    }
    .tabOpt{
        display: flex;
        .float_right{
            position: absolute;
            right: .36rem;
        }
        .active{
            color: #FFFFFF !important;
            background: linear-gradient(0deg, #185DE8 0%, #4885FF 100%) !important;
        }
        
        .taskcom_button{
            margin-right: .1rem;
            height: .4rem;
            border: 1px solid #C1C8D7;
            background: linear-gradient(0deg, #D4DBE8 0%, #F8F9FB 100%);
            border-radius: .03rem;
            outline: none;
            font-size: 18px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #505971;
            display: flex;
            align-items: center;
            justify-content: space-around;
            padding: 0 .1rem;
            cursor: pointer;
            
            &:hover{
                color: #FFFFFF;
                background: linear-gradient(0deg, #185DE8 0%, #4885FF 100%);
                .danger{
                    background: url("../../../assets/images/taskOptIcon/warn_active.png") no-repeat center 0px;
                    background-position: center 0px;
                    background-size: cover;
                    background-repeat: no-repeat;
                }
                .ck{
                    background: url("../../../assets/images/taskOptIcon/ck_active.png") no-repeat center 0px;
                    background-position: center 0px;
                    background-size: cover;
                    background-repeat: no-repeat;
                }
                .down{
                    background: url("../../../assets/images/taskOptIcon/down_active.png") no-repeat center 0px;
                    background-position: center 0px;
                    background-size: cover;
                    background-repeat: no-repeat;
                }
                .up{
                    background: url("../../../assets/images/taskOptIcon/up_active.png") no-repeat center 0px;
                    background-position: center 0px;
                    background-size: cover;
                    background-repeat: no-repeat;
                }
                .video{
                    background: url("../../../assets/images/taskOptIcon/video_active.png") no-repeat center 0px;
                    background-position: center 0px;
                    background-size: cover;
                    background-repeat: no-repeat;
                }
            }
            .btn_icon{
                width: .23rem;
                height: .22rem;
                margin-right: .1rem;
            }
            .danger{
                background: url("../../../assets/images/taskOptIcon/warn.png") no-repeat center 0px;
                background-position: center 0px;
                background-size: cover;
                background-repeat: no-repeat;
            }
            .ck{
                background: url("../../../assets/images/taskOptIcon/ck.png") no-repeat center 0px;
                background-position: center 0px;
                background-size: cover;
                background-repeat: no-repeat;
            }
            .down{
                background: url("../../../assets/images/taskOptIcon/down.png") no-repeat center 0px;
                background-position: center 0px;
                background-size: cover;
                background-repeat: no-repeat;
            }
            .up{
                background: url("../../../assets/images/taskOptIcon/up.png") no-repeat center 0px;
                background-position: center 0px;
                background-size: cover;
                background-repeat: no-repeat;
            }
            .add{
                background: url("../../../assets/images/taskOptIcon/add.png") no-repeat center 0px;
                background-position: center 0px;
                background-size: cover;
                background-repeat: no-repeat;
            }
            .video{
                background: url("../../../assets/images/taskOptIcon/video.png") no-repeat center 0px;
                background-position: center 0px;
                background-size: cover;
                background-repeat: no-repeat;
            }
        }
        .novideoImg{
            margin-right: .1rem;
            height: .4rem;
            border: 1px solid #C1C8D7;
            background: linear-gradient(0deg, #D4DBE8 0%, #F8F9FB 100%);
            border-radius: .03rem;
            outline: none;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #505971;
            display: flex;
            align-items: center;
            justify-content: space-around;
            padding: 0 .1rem;
            cursor:not-allowed !important;
            position: relative;
            overflow: hidden;
            &:hover{
                color: #505971;
                background: linear-gradient(0deg, #D4DBE8 0%, #F8F9FB 100%);
                .video{
                    background: url("../../../assets/images/taskOptIcon/video.png") no-repeat center 0px;
                    background-position: center 0px;
                    background-size: cover;
                    background-repeat: no-repeat;
                }
            }
            &::after{
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                width: 120px;
                height: 2px;
                background-color: #ddd; 
                transform: translateX(-50%) translateY(-50%) rotate(-13deg);
            }
            &::before{
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                width: 120px;
                height: 2px;
                background-color: #ddd; 
                transform: translateX(-50%) translateY(-50%) rotate(13deg);
            }
        }
        .novideo{
            margin-right: .1rem;
            height: .4rem;
            border: 1px solid #C1C8D7;
            background: linear-gradient(0deg, #D4DBE8 0%, #F8F9FB 100%);
            border-radius: .03rem;
            outline: none;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #505971;
            display: flex;
            align-items: center;
            justify-content: space-around;
            padding: 0 .1rem;
            cursor:not-allowed !important;
            position: relative;
            &:hover{
                color: #505971;
                background: linear-gradient(0deg, #D4DBE8 0%, #F8F9FB 100%);
                .video{
                    background: url("../../../assets/images/taskOptIcon/video.png") no-repeat center 0px;
                    background-position: center 0px;
                    background-size: cover;
                    background-repeat: no-repeat;
                }
                .ck{
                    background: url("../../../assets/images/taskOptIcon/ck.png") no-repeat center 0px;
                    background-position: center 0px;
                    background-size: cover;
                    background-repeat: no-repeat;
                }
            }
           
        }
    }
    .table-edit{
        cursor: pointer;
        height: .26rem;
        width: .26rem;
        background: url("../../../assets/images/editIcon.png") no-repeat center 0px;
        background-position: center 0px;
        background-size: contain;
        background-repeat: no-repeat;
        &:hover{
            cursor: pointer;
            height: .3rem;
            width: .3rem;
            background-position: center 0px;
            background-size: contain;
            background-repeat: no-repeat;
            background: url("../../../assets/images/icon-intro-active.png") no-repeat center 0px;
        }
    }
    .table-delete{
        cursor: pointer;
        height: .26rem;
        width: .26rem;
        background: url("../../../assets/images/icon-del-small-gray.png") no-repeat center 0px;
        background-position: center 0px;
        background-size: contain;
        background-repeat: no-repeat;
        &:hover{
            cursor: pointer;
            height: .3rem;
            width: .3rem;
            background-position: center 0px;
            background-size: contain;
            background-repeat: no-repeat;
            background: url("../../../assets/images/icon-del-small.png") no-repeat center 0px;
        }
    }
}
.table{
    padding: .3rem .36rem .3rem 20px;
    background: #F2F3F7;
    margin-top: .14rem;
    margin-right:0.46rem;
    height: calc(100vh - 3rem);
    overflow-y: scroll;
}